// --------------------------------------------------
// 骨架图
// @Author: steven.wjx
// @Date:   2020-03-05 13:17:50
// --------------------------------------------------
.#{$ui-name}skeleton {
	position: relative;
	padding: 16px 0;

	&.#{$ui-name}skeleton-has-avatar {
		padding-left: 55px;
	}

	.#{$ui-name}skeleton-title {
		width: 100%;
		height: 15px;
		margin-top: 15px;
		margin-bottom: 0;
		background-color: $skeleton-color;
	}

	.#{$ui-name}skeleton-list {
		margin-top: 20px;
		margin-bottom: 0;
		list-style: none;
		padding-left: 0;

		.#{$ui-name}skeleton-item {
			width: 100%;
			height: 15px;
			margin-top: 15px;
			background-color: $skeleton-color;
		}
	}

	.#{$ui-name}skeleton-avatar {
		position: absolute;
		left: 0;
		top: 16px;
		width: 40px;
		height: 40px;
		background-color: $skeleton-color;
		border-radius: 50%;
	}

	&.#{$ui-name}skeleton-active {
		.#{$ui-name}skeleton-title {
			background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
			background-size: 400% 100%;
			animation: ant-skeleton-loading 1s ease infinite;
		}

		.#{$ui-name}skeleton-list {
			.#{$ui-name}skeleton-item {
				background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
				background-size: 400% 100%;
				animation: ant-skeleton-loading 1s ease infinite;
			}
		}
	}
}

@-webkit-keyframes ant-skeleton-loading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

@keyframes ant-skeleton-loading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

@-webkit-keyframes ant-skeleton-loading-rtl {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

@keyframes ant-skeleton-loading-rtl {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}